const path = require("path")
// 引入插件，生成html 并引 出口js
// npm i html-webpack-plugin -D
const htmlPlgin = require("html-webpack-plugin")

// npm i style-loader css-loader sass-loader node-sass mini-css-extrack-plugin -D
const extrack = require("mini-css-extract-plugin")


// 引入vue识别style的依赖
const { VueLoaderPlugin } = require("vue-loader")

module.exports = {
    // 入口
    entry:{
        index:"./src/main.js"
    },
    output:{
        // 路径
        path :path.resolve(__dirname,"dist"),
        // 打包好的html名字
        filename:"./js/main.js",
    },
    plugins:[
        new htmlPlgin({
            // 用到的模板
            template:"./public/index.html",
            // 打包好的html文件名字
            filename: "index.html",
            // 需要引入的模块
            chunks:["index"],
            // 不要压缩
            minify:false
        }),
        new extrack({
            filename:'css/[name].css'
        }),
        new VueLoaderPlugin()
    ],
    module:{
        rules:[
            // 打包.vue文件
            {
                test:/\.vue$/,
                use:["vue-loader"]
            },
            {            
                test:/\.css$/,
                use:[extrack.loader,"css-loader"]
            },
            {
                test:/\.scss$/,
                use:[extrack.loader,"css-loader","sass-loader"]
            },
            // 用html-loader载入图片
            {
                test:/\.html$/,
                use:["html-loader"]
            },
            // webpack5 自带的打包规则
            {
                test:/\.(jpg|jpeg|png|gif|webp|bmp|svg)/,
                type:"asset",
                parser:{
                    // 条件
                    dataUrlCondition:{
                        // 大小
                        maxSize:10  //单位kb，当图片小于10kb的时候
                        //就打包成代码图片呢
                    }
                },
                // 生成器
                generator:{
                    // 指定路径
                    filename:"images/[name][ext]"
                }
            }
        ]
    },
    devServer:{
        port:"7070"
    },
    mode:"development"
}